<template>
  <div class="app-container-page">
    <div class="fullCalendarContent">
      <FullCalendar id="calendar" ref="myfullCalendar" class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:dayCellContent="arg">
          {{ arg.dayNumberText.slice(0,arg.dayNumberText.length - 1) }}
        </template>
        <template v-slot:eventContent="arg">
          <span>
            <label>下单</label>
            <label>礼服</label>
            <label>摄化</label>
            <label>补拍</label>
            <label>重拍</label>
            <label>对比图</label>
            <label>选片</label>
            <label>精修</label>
            <label>看精修</label>
            <label>设计</label>
            <label>外发</label>
            <label>取件</label>
          </span>
        </template>
      </FullCalendar>
    </div>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  export default {
    name: 'OrderIndex',
    components: {
      FullCalendar
    },
    data() {
      return {
        editModal: false,
        loading: false,
        driver: null,
        orderStateList: [],
        datalist: [],
        nowdatalist: [],
        title: '',
        calendarOptions: {
          locale: 'zh',
          plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
          initialView: 'dayGridMonth',
          firstDay: 1,
          headerToolbar: {
            left: '',
            center: 'prev title next',
            right: ''
          },
          buttonText: {
            prev: '<',
            next: '>',
          },
          contentHeight: '78vh',
          events: [
            { start: '2024-08-01' },
            { start: '2024-08-02' },
            { start: '2024-08-03' },
            { start: '2024-08-04' },
            { start: '2024-08-05' },
            { start: '2024-08-06' },
            { start: '2024-08-07' },
            { start: '2024-08-08' },
            { start: '2024-08-09' },
            { start: '2024-08-10' },
            { start: '2024-08-11' },
            { start: '2024-08-12' },
            { start: '2024-08-13' },
            { start: '2024-08-14' },
            { start: '2024-08-15' },
            { start: '2024-08-16' },
            { start: '2024-08-17' },
            { start: '2024-08-18' },
            { start: '2024-08-19' },
            { start: '2024-08-20' },
            { start: '2024-08-21' },
            { start: '2024-08-22' },
            { start: '2024-08-23' },
            { start: '2024-08-24' },
            { start: '2024-08-25' },
            { start: '2024-08-26' },
            { start: '2024-08-27' },
            { start: '2024-08-28' },
            { start: '2024-08-29' },
            { start: '2024-08-30' },
            { start: '2024-08-31' },
          ]
        },
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>
<style scoped lang="less">
  .app-container-page {
    padding-top: 40px;
  }

  .fullCalendarContent {
    height: 100%;
    padding-top: 20px;
    background-color: #fff;
  }
</style>
